<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript">

$(document).ready(function(){
	$(".monetario").maskMoney({thousands:'', decimal:'.', allowZero:true, allowNegative:true});
});

</script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Novo Produto</title>
</head>
<body>
	<div class="container">
		<a href="<c:url value='/produto/listar'/>" class="btn btn-default">Lista de Produtos</a>
		<hr>	
		<form role="form" id="formCadastroProdutoBase" action="<c:url value='/produto/salvar'/>" method="POST" class="form">
			<fieldset>
				<legend>Novo Produto</legend>
				<div class="form-group col-xs-8">
					<label for="labelDescricaoProdutoBase">Nome</label> 
					<c:if test="${produtoBase.id >= 1}">
						<input type="hidden" name="id" value="${produtoBase.id}">
					</c:if>
					<input type="text" name="nome" class="form-control" id="inputNomeProdutoBase" value="${produtoBase.nome}" placeholder="Nome" data-required>
				</div>
				<span class="spacer"></span>
				
				
				<div class="form-group col-xs-3">
					<label for="labelDescricaoProdutoBase">Categoria</label> 
					<select name="idCategoria" class="form-control">
						<option value="">Selecione</option>
						
					<c:forEach items="${categoriaList}" var="categorias">
						
						<c:if test="${categorias.id == produtoBase.categoria.id}">
							<option value="${categorias.id}" selected="selected">${categorias.descricao}</option>	
						</c:if>
						
						<c:if test="${categorias.id != produtoBase.categoria.id}">
							<option value="${categorias.id}">${categorias.descricao}</option>	
						</c:if>
									
					</c:forEach>				
					</select>
				</div>
				<span class="spacer"></span>		
				<div class="form-group col-xs-3">
					<label for="labelValorUnitarioProdutoBase">Valor Unitario</label>					
					<input type="text" name="valorUnitario" class="form-control monetario" id="inputValorUnitarioProdutoBase" value="${produtoBase.valorUnitario}" placeholder="Valor Unitario" data-required>
				</div>
				<span class="spacer"></span>
				<div class="form-group col-xs-3">
					<label for="labelPesoUnitarioProdutoBase">Peso Unitario  <small>(em gramas)</small></label>					
					<input type="text" name="pesoUnitario" class="form-control" id="inputPesoUnitarioProdutoBase" value="${produtoBase.pesoUnitario}" placeholder="Peso Unitario">
				</div>
				<span class="spacer"></span>
				<div class="form-group col-xs-8">
					<button type="submit" class="btn btn-default">Salvar</button>
				</div>
			</fieldset>
		</form>
	</div>
	<script type="text/javascript">
			$().ready(function() {
				$( "#formCadastroProdutoBase" ).validate({
					rules: {					
						nome: 'required',
						categoria: 'required',
						valorUnitario: 'required',
						pesoUnitario: 'required',
					},
					messages: {
						nome: "Preencha esse campo.",
						categoria: "Preencha esse campo.",
						valorUnitario: "Preencha esse campo.",
						pesoUnitario: "Preencha esse campo.",
					}
				});
			});
		</script>		
</body>
</html>